<template>
    <div class="send-transcation">
        <el-card class="box-card send-content">
            <el-form class="send-transcation-form" ref="sendTranscation"
                    v-model="sendTranscation"
                    :rules="sendTranscationRule"
                    label-position="top">
                <el-form-item :label="$t('wallet.to')">
                    <el-input v-model.trim="sendTranscation.to" :placeholder="$t('wallet.walletAddress0x')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('wallet.amountSend')">
                    <el-input v-model.trim="sendTranscation.value" @blur="changeVal" :placeholder="$t('wallet.amountHint')" type="number" @input="sendTranscationValueChange" :key="sendTranscationInputKey">
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button type="primary" @click="confirm" :disabled="!sendTranscation.to || !sendTranscation.value">{{$t("wallet.send")}}</el-button>
            </div>
        </el-card>
        <el-dialog :title="$t('wallet.sendTransaction')" :visible.sync="showConfirm" class="send-dialog" :modal="false">
            <div class="text">{{$t("wallet.TransTxt")}}</div>
            <div class="text">{{$t("wallet.amount")}}：{{sendTranscation.value}} dlb（{{$t("wallet.fee")}}：1 dlb）</div>
            <p class="inputb">
                <el-input class="input-psw" :placeholder="$t('wallet.input')+''+$t('wallet.walletPsw')" type="password" v-model.trim="sendTranscation.psw"></el-input>
            </p>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showConfirm=false" type="default">{{$t("form.cancel")}}</el-button>
                <el-button class="subBtn" @click="send" type="primary" :disabled="!sendTranscation.psw">{{$t('form.sure')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { sendMoney } from '../../createAccount'
export default {
    name: "o-wallet-send-transcation",
    data(){
        return{
            sendTranscation: {
                to: '',
                value: '',
                gas: 0,
                input: '',
                psw:''
            },
            sendTranscationRule:{},
            sendTranscationInputKey:0,
            showConfirm:false
        }
    },
    activated(){
        this.reset()
    },
    methods: {
        reset(){
            this.sendTranscation = {
                to: '',
                value: '',
                gas: 0,
                input: '',
                psw:''
            }
            this.sendTranscationRule = {};
            this.sendTranscationInputKey = 0;
            this.showConfirm = false;
        },
        changeVal(){
            if(this.sendTranscation.value==0){
                this.sendTranscation.value=''
            }
        },
        sendTranscationValueChange(val){
            if(val.length>20){
                const now = val.substring(0,20)
                val = now
                this.sendTranscation.value = now
                this.sendTranscationInputKey = Math.random()
            }
        },
        confirm(){

            // // 接收地址不正确
            // if(!/(0x)[0-9a-fA-F]{40}$/g.test(this.sendTranscation.to)){
            //     this.$message.error(this.$t('wallet.incorrectAddress'));
            //     return;
            // }

            // 不能发送给自己
            if(this.sendTranscation.to==this.$route.query.publicKey){
                this.$message.error(this.$t('wallet.sendToSelf'));
                return;
            }

            // 数量格式有误  正整数不包括0： /^[1-9]\d*$/g
            if(!/^[1-9]\d*$/g.test(this.sendTranscation.value)){
                this.$message.error(this.$t('wallet.incorrectValue'));
                return;
            }

            // 发送余额不足
            if(Number(this.sendTranscation.value) + 1 > Number(this.$route.query.balance)){
                this.$message.warning({message:this.$t('wallet.insufficientBalance'),customClass:'warn'});
                return;
            }

            this.showConfirm = true;
        },
        send(){
            sendMoney(this.$route.query.publicKey,this.sendTranscation.psw,this.sendTranscation.to,this.sendTranscation.value,(resp)=>{
                // console.log(resp)
                if(resp.success){
                    // 发送交易成功
                    this.$message({
                        message: this.$t('wallet.transactionSuccess'),
                        type: 'success'
                    })
                    this.$router.push('/o-wallet-list')
                }else{
                    // 发送交易失败
                    this.$message({
                        // message: this.$t('wallet.transactionFailed'),
                        message: resp.msg,
                        type: 'error'
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped> 
.send-transcation{
    position:absolute;
    top:65px;
    bottom:22px;
    left:10px;
    right:10px;
    .send-content{
        height: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        padding-top: 20px;
        padding-left: 14px;
        font-size: 12px;
        color: #525768;
        .send-transcation-form{
            width: 300px;
            .send-slider{
                display:block;
                width:300px;
            }
        }
        .btn{
            width: 300px;
            text-align:right;
        }
    }
    .send-dialog{
        .text{
            margin-bottom:10px;
        }
    }
}
</style>
